<html>
    <head>
        <title>列表渲染(循环渲染)</title>
    </head>
    <body>
        <script>
            // ★、列表渲染


                    // ★一、用 v-for 把一个数组对应为一组元素

                                /*
                                        我们可以用 v-for 指令基于一个数组来渲染一个列表。
                                        v-for指令需要使用 " item in items " 形式的特殊语法，其中 "items" 是源数据数组，而 item 则是"被迭代的数据元素的别名"。

                                        eg:
                                            <ul id="example-1">
                                                <li v-for="item in items" :key="item.message">
                                                    {{item.message}}
                                                </li>
                                            </ul>
                                */

                                /*
                                    在 v-for 块中，我们可以访问所有父作用域的 prperty.
                                    v-for 还支持一个可选的第二个参数，即当前想的索引。
                                */
                                            /*
                                                eg:
                                                    <ul id="example-2">
                                                        <li v-for="(item,index) in items">
                                                            {{ parentMessage}} -{{index}} -{{ item.message}}
                                                        </li>
                                                    </ul>
                                            */

                                            var example2= new Vue({
                                                el:'example-2',
                                                data:{
                                                    parentMessage:'parent',
                                                    items:[
                                                        {message:'Foo'},
                                                        {mesage:'Bar'}
                                                    ]
                                                }
                                            });


                                /*
                                    你也可以使用 of 替代 in 作为分隔符，因为它更接近 JS迭代器的语法：

                                    eg：
                                        <div v-for="item of items"></div>
                                */
                
                    
                    // ★二、 在 v-for 里使用对象

                                /*
                                    你也可以用 v-for 来遍历一个对象的 property:
                                */
                                        /*
                                            eg:
                                                <ul id="v-for-object" class="demo">
                                                    <li v-for="value in object">
                                                        {{ value}}
                                                    </li>
                                                </ul>
                                        */
                                        new Vue({
                                            el:'#v-for-object',
                                            data:{
                                                Object:{
                                                    title:'How to do lists in Vue',
                                                    author:'Jane Doe',
                                                    publishedAt:'2016-04-10'
                                                }
                                            }
                                        });

                                /*
                                    你也可以提供第二个的参数，为 property名称 (也就是"键名")
                                */
                                        /*
                                            <div v-for="(value,name) in object ">
                                                {{name}} : {{value}}
                                            </div>
                                        */

                                /*
                                    你还可以配置第三个参数作为索引
                                */
                                        /*
                                            <div v-for="(value,name,index) in object" >
                                                {{index}}.{{name}}.{{value}}
                                            </div>
                                        */
                                
                                /*
                                    在遍历对象时，会按照 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
                                */
                        


                    // ★三、 维护状态
                                
                                /*
                                    当Vue正在更新使用 v-for 渲染的元素列表时，它默认使用 "就地更新" 的策略。
                                    如果数据的顺序被该百年， Vue 将不会移动DOM元素来匹配数据的顺序，而是就地更新每个元素，并且确保他们在每个索引位置正确渲染。

                                    这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。

                                    为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每个项提供一个唯一的 key attribute:
                                */
                                        /*
                                            eg:
                                                <div v-for="item in items" v-bind:key="item.id">
                                                       
                                                </div>
                                        */ 
                                       
                                /*
                                    建议尽可能子啊使用 v-for 时提供 key attribute,除非遍历输出的DOM内容非常简单，或者可以依赖默认行为以获取性能上的提升。


                                    因为它是Vue识别节点的一个通用机制， Key 并不仅与 v-for 特别关联。后面我们将在指南中看见，它还具有其他用途。

                                    注意：  不要使用对象或数组之类的非基本类型值作为 v-for的 key 。  请用字符串或数值类型的值！
                                */


                    // ★四、数组更新检测
                                // ★①、变更方法
                                            /*
                                                Vue 将被监听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
                                                这些被包裹过的方法包括：
                                                    push()
                                                    pop()
                                                    shift()
                                                    unshift()
                                                    splice()
                                                    sort()
                                                    reverse()
                                            */

                                // ★②、替换数组
                                            /*
                                                变更方法，顾名思义，会变更调用了这些方法的原始数据。
                                                相比之下，也有非变更方法，例如  filter(),concat(),slice(). 它们不会变更数组，而总是返回一个新数组。
                                                当使用"非变更方法"时，可以用新数组替换旧数组。


                                                你可能认为这将导致 Vue丢弃现有DOM并重新渲染整个列表。幸运的是，事实并非如此。
                                                Vue为了是的DOM元素得到最大范围的重用而实现了一些智能的启发方式方法，所以用一个含有相同元素的数组去替换原来的数据是非常高效的操作。
                                            */

                                // ★③、注意事项
                                            /*
                                                由于JS的限制， Vue不能检测数组和对象的变化，只能检测代码对数组的变更和替换。
                                            */
                        
                                            
                    // ★五、 显示 过滤/排序 后的结果
                                /*
                                    有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。
                                    在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
                                */
                                             /*
                                                eg:
                                                    <li v-for="n in eventNumbers">{{n}}</li>
                                             */
                                                data:{
                                                    numbers:[1,2,3,4,5]
                                                },
                                                computed:{
                                                    eventNumbers:function(){
                                                        return this.numbers.filters((number)=>{
                                                            return number %2 ===0
                                                        })
                                                    }
                                                }

                                /*
                                    在计算属性不合适的情况下(例如，在嵌套 v-for 循环中)你可以使用一个方法：
                                */
                                                /*
                                                    eg:
                                                       <ul v-for="set in sets">
                                                           <li v-for="n in even(set)">{{ n}}</li>
                                                       </ul>
                                                */
                                                    data:{
                                                        sets:[[1,2,3,4,5],[6,7,8,9,10]]
                                                    },
                                                    method:{
                                                        even:function(numbers){
                                                            return numbers.filters((number)=>{
                                                                return number %2 ===0
                                                            })
                                                        }
                                                    }
                    // ★六、 在 v-for 里使用范围值

                                /*
                                    v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

                                        eg：
                                            <div>
                                                <span v-for="n in 10">{{n}}</span>
                                            </div>
                                */

                    // ★七、在<template> 上使用 v-for
                                /*
                                    类似于 v-if ，你也可以利用古代有　v-for 的 <template> 来循环渲染一段包含多个元素的内容。
                                */
                                        /*
                                            eg:
                                                <ul>
                                                    <template v-for="item in itmes">
                                                        <li>{{item.msg}}</li>
                                                        <li class="divider" role="presentation"></li>
                                                    </template>
                                                </ul>
                                        */

                    // ★八、 v-for 与 v-if 一同使用
                                /*
                                    注意： 我们不推荐在同一个元素上使用 v-if 和 v-for  。


                                    当它们处于同一个节点， v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个v-for循环中。
                                    当你只想为部分项渲染节点时，这种优先级的机制会十分有用！！
                                */
                                        /*
                                            eg:
                                                <li v-for="todo in todos" v-if="!todo.isComplete">
                                                    {{ todo }}
                                                </li>
                                        */

                                        /*
                                            上面的代码将只渲染未完成的 todo
                                        */

                                        /*
                                            而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素(或 <template>) 上。

                                                eg：
                                                    <ul v-if="todos.length">
                                                        <li v-for="todo in todos">
                                                            {{todo}}
                                                        </li>
                                                    </ul>
                                        */


                    // ★九、在组件上使用 v-for
                                /*
                                        在自定义组件上，你可以像在任何普通元素上一样使用　v-for .


                                        注意： 在 2.2.0+ 的版本中，当在组件上使用 v-for 时，key 是必须的。

                                        然而，任何数据都不会被传递到组件里，因为组件有自己独立的作用域。
                                        为了把迭代数据传递到组件里，我们要使用props:

                                                    eg:
                                                        <my-component v-for="(item,index) in items"
                                                                      v-bind:item="item"
                                                                      v-bind:index="index"
                                                                      v-bind:key="item.id"
                                                        >
                                                        </my-component>

                                        不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够让组件在其他场合重复使用。
                                */                
                                    
        </script>
    </body>
</html>